<template>
  <div class="find">
    <div class="find_wrap">
      <!-- 搜索框 -->
      <van-search
        v-model="value"
        placeholder="搜索游戏、用户、厂商或帖子"
        @click="tosearch"
      />
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in state.list" :key="item.id"
          ><img :src="item.Imgurl" alt=""
        /></van-swipe-item>
      </van-swipe>
      <!-- 找游戏 -->
      <div class="find_games">
        <p>找游戏</p>
        <span>查看更多</span>
        <div class="findimg">
          <img
            src="../../../public/searchImg/1-1.png"
            alt=""
            style="width: 67px; height: 36px"
          />
          <img
            src="../../../public/searchImg/1-2.png"
            alt=""
            style="width: 50px; height: 36px"
          />
          <img
            src="../../../public/searchImg/1-3.png"
            alt=""
            style="width: 50px; height: 36px"
          />

          <img
            src="../../../public/searchImg/1-5.png"
            alt=""
            style="width: 50px; height: 36px"
          />
          <img
            src="../../../public/searchImg/1-6.png"
            alt=""
            style="width: 89px; height: 36px"
          />
          <img
            src="../../../public/searchImg/1-4.png"
            alt=""
            style="width: 50px; height: 36px"
          />
        </div>
      </div>
      <!-- Tap云游戏 -->
      <div class="tapgames">
        <p>Tap云玩游戏</p>
        <span>查看更多</span>
        <ul>
          <li v-for="item in state.list" :key="item.id">
            <img :src="item.url" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
      <!-- 每日新发现 -->
      <div class="newfind">
        <p>每日新发现</p>
        <span>查看更多</span>
        <ul>
          <li v-for="(item, index) in state.list" :key="index">
            <img :src="item.url" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </div>
      <div class="box"></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
export default {
  setup() {
    const value = ref("");
    const router = useRouter();
    const tosearch = () => {
      router.push("/search");
    };
    const state = reactive({
      list: [],
    });
    axios
      .get("http://121.199.14.205:3000/api/list", {
        params: {
          pageSize: 7,
          currentPage: 1,
        },
      })
      .then(function (response) {
        state.list = response.data.list;
      });
    return { value, state, tosearch };
  },
};
</script>

<style lang="less">
.find {
  width: 100%;
  .van-swipe {
    overflow: hidden;
  }
  .find_wrap {
    width: 100%;
    .my-swipe {
      margin: 0 16px;
      border-radius: 8px;
      margin-bottom: 16px;
      .van-swipe-item {
        width: 340px;
        height: 132px;
        font-size: 0;
        img {
          width: 342px;
          height: 132px;
        }
      }
    }
    .find_games {
      margin: 0 15px;
      p {
        font-size: 18px;

        display: inline-block;
        margin-right: 220px;
      }
      span {
        font-size: 14px;
        color: #34c3c6;
      }
      .findimg {
        margin-top: 15px;
        display: flex;
        height: 36px;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }

        img {
          border-radius: 14px;
          flex-shrink: 0;
          margin-right: 15px;
        }
      }
    }
    .newfind {
      margin: 35px 15px 0 15px;
      p {
        font-size: 18px;

        display: inline-block;
        margin-right: 185px;
      }
      span {
        font-size: 14px;
        color: #34c3c6;
      }
      ul {
        margin-top: 15px;
        display: flex;
        height: 120px;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }

        li {
          height: 120px;

          width: 87px;
          border-radius: 14px;
          flex-shrink: 0;
          margin-right: 15px;
          img {
            height: 87px;
            width: 87px;
            border-radius: 8px;
          }
          p {
            display: block;
            width: 100%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
        }
      }
    }
    .tapgames {
      margin: 35px 15px 0 15px;
      p {
        font-size: 18px;
        display: inline-block;
        margin-right: 175px;
      }
      span {
        font-size: 14px;
        color: #34c3c6;
      }
      ul {
        margin-top: 15px;
        display: flex;
        height: 120px;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }

        li {
          height: 120px;
          // background: red;
          width: 87px;
          flex-shrink: 0;
          margin-right: 15px;
          img {
            height: 87px;
            width: 87px;
            border-radius: 8px;
          }
          p {
            display: block;
            width: 100%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
          }
        }
      }
    }
    .box {
      width: 100%;
      height: 70px;
    }
  }
}
</style>
